<template>
	<view class="">
		<view class="point_top" v-for="(item,subscript) in 5" :key="subscript">
			<view class="point_name">发货点名称</view>
			<view class="point_address">地址:辽宁省沈阳市铁西区金尚路30号</view>
			<view class="point_xian"></view>
			<view class="point_warp">
				<u-checkbox-group>
					<u-checkbox @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list"
						:key="index" :name="item.name" shape="circle" active-color="#E93E30" size="36"><text
							class="point_text">{{item.name}}</text></u-checkbox>
				</u-checkbox-group>
				<view class="point_btn">
					<view class="point_edit">编辑</view>
					<view class="point_delete">删除</view>
				</view>
			</view>
		</view>
		<view class="point_add" @click="shows">
			<view class="add_btn">添加发货点</view>
		</view>
		<view>
			<u-popup v-model="show" mode="bottom" :closeable="true" height="680rpx">
				<view class="popup_top">添加发货点</view>
				<view class="popup_line"></view>
				<view class="popup_form">
					<u-form :model="form" ref="uForm" label-align="right" label-width="210rpx">
						<u-form-item label="发货点名称:"><u-input :clearable="false" placeholder="请输入" v-model="form.name" /></u-form-item>
						<u-form-item label="地址:"><u-input placeholder="请选择" v-model="value" @click="showsa = true" /></u-form-item>
						<u-select confirm-color="#E93E30" v-model="showsa" mode="mutil-column-auto" :list="actionSheetList"
							@confirm="confirm"></u-select>
						<u-form-item label="详细地址:"><u-input :clearable="false" placeholder="请输入" v-model="form.sex" /></u-form-item>
					</u-form>
				</view>
				<view class="popup_botom">
					<view class="bot_confirm" @click="confirms">完成</view>
					<view class="bot_cancel" @click="cancel">取消</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showsa: false,
				value: '',
				form: {
					name: '',
					intro: '',
					sex: ''
				},
				list: [{
					name: '使用该地址',
					checked: false,
					disabled: false
				}],
				actionSheetList: [{
						value: 1,
						label: '中国',
						children: [{
								value: 2,
								label: '广东',
								children: [{
										value: 3,
										label: '深圳'
									},
									{
										value: 4,
										label: '广州'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '美国',
						children: [{
							value: 9,
							label: '纽约',
							children: [{
								value: 10,
								label: '皇后街区'
							}]
						}]
					}
				],
			}
		},
		methods: {
			checkboxChange(e) {
				console.log(e)
			},
			shows() {
				this.show = true
			},
			confirm(e) {
				this.value = e[0].label + '/' + e[1].label + '/' + e[2].label
				console.log(this.value);
			},
			confirms(){
				uni.showToast({
					title: '成功',
					icon:'success',
					duration: 1000
				});
				this.show = false
			},
			cancel(){
				this.show = false
			}
		}
	}
</script>

<style>
	page {
		background: #F4F5F7;
		padding-bottom: 200rpx;
	}

/* 	::v-deep.u-icon--right {
		display: none !important;
	} */
</style>
<style scoped lang="scss">
	.point_top {
		padding: 24rpx 29rpx 33rpx 29rpx;
		background: #FFF;
		margin-top: 24rpx;

		.point_name {
			font-size: 30rpx;
			font-weight: 500;
			line-height: 42rpx;
			color: #383838;
			margin-bottom: 5rpx;
		}

		.point_address {
			font-size: 26rpx;
			font-weight: 400;
			line-height: 42rpx;
			color: #9A9A9A;
			margin-bottom: 30rpx;
		}

		.point_xian {
			height: 1rpx;
			opacity: 1;
			transform: rotate(0.04deg);
			border: 1px solid #E6E6E6;
			margin-bottom: 20rpx;
		}

		.point_text {
			margin-left: 14rpx;
			font-size: 24rpx;
			font-weight: 400;
			line-height: 33rpx;
			color: #999999;
		}

		.point_warp {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.point_btn {
				display: flex;
				align-items: center;

				.point_edit {
					width: 167rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background: #E93E30;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 39rpx;
					color: #FFFFFF;
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.point_delete {
					width: 167rpx;
					height: 64rpx;
					border-radius: 32rpx;
					background: #F5F5F5;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 39rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.point_add {
		position: fixed;
		bottom: 80rpx;
		width: 100%;
		padding: 0rpx 37rpx;

		.add_btn {
			height: 88rpx;
			border-radius: 44rpx;
			background: linear-gradient(147.27deg, #F1714E 0%, #E93E30 100%);
			font-size: 32rpx;
			font-weight: 500;
			line-height: 44rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.popup_top {
		text-align: center;
		padding-top: 30rpx;
		margin-bottom: 50rpx;
	}

	.popup_line {
		width: 100%;
		height: 1rpx;
		background: #F4F5F7;
	}

	.popup_botom {
		display: flex;
		align-items: center;
		margin-top: 80rpx;
		padding: 0rpx 31rpx;
		justify-content: space-between;
		.bot_confirm {
			width: 334rpx;
			height: 88rpx;
			border-radius: 50px;
			background: #EE3535;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 39rpx;
			color:#FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.bot_cancel{
			width: 334rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx solid #EE3535;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 39rpx;
			color: #EE3535;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>